<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>角色添加权限</title>

    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link href="/URMS/lib/layui-v2.5.5/css/layui.css" media="all" rel="stylesheet">
    <link href="/URMS/css/public.css" media="all" rel="stylesheet">
</head>
<body>
<div class="layuimini-container" style="text-align: center">

    <div class="layuimini-main" style="display:inline-block;width:700px;">
        <!-- 示例-970 -->
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>角色添加权限</legend>
        </fieldset>

        <form action="" class="layui-form">
            <input id="id" name="id" th:value="${addRole.id}" type="hidden">

            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" disabled id="name" name="name"
                           th:value="${addRole.name}"
                           type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ">添加权限</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <div class="demo-tree" id="tree"></div>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-filter="demo1" lay-submit="saveBtn">立即提交</button>
                </div>
            </div>
        </form>

    </div>
</div>

<script charset="utf-8" src="/URMS/lib/layui-v2.5.5/layui.js"></script>
<script charset="utf-8" src="/URMS/js/lay-config.js?v=1.0.4"></script>
<script>
    layui.use(["form", "tree", "layer", 'util'], function () {
        var form = layui.form,
            tree = layui.tree,
            util = layui.util,
            $ = layui.jquery,
            layer = layui.layer;


        //初始化树形结构
        $.ajax({
            url: '/URMS/sysRole/treeMenu',
            async: false,
            success: function (data) {
                tree.render({
                    elem: '#tree'
                    , data: data
                    , showCheckbox: true           //是否显示复选框
                    , onlyIconControl: false     //是否仅允许节点左侧图标控制展开收缩。默认 false（即点击节点本身也可控制）。若为 true，则只能通过节点左侧图标来展开收缩
                    , showLine: false            //是否开启连接线。默认 true，若设为 false，则节点左侧出现三角图标。
                    , id: 'id'
                });
            }
        })
        $.ajax({
            url: '/URMS/sysRole/selectPermissions',
            data: {id: $('#id').val()},
            success: function (data) {
                tree.setChecked("id", getTreeId(data));
            }
        })

        /**
         * 递归获取选中菜单的id
         * @param node
         * @returns {*}
         */
        let menuIds = [];

        function getTreeId(node) {
            if (node.length > 0) {

                alert(JSON.stringify(node.field))
                for (let i = 0; i < node.length; i++) {
                    if (node[i].children = null) {
                        menuIds.push(node[i].id);
                    }
                    if (node[i].children) {
                        getTreeId(node[i].children);
                    }
                }
                alert(menuIds)
                return menuIds;
            }
        }

        // function getTreeId(node) {
        //     if (node.length > 0) {
        //         let menuIds = [];
        //         for (let i = 0; i < node.length; i++) {
        //             menuIds.push(node[i].menuid);
        //         }
        //         alert(menuIds)
        //         return menuIds;
        //     }
        // }

        /**
         * 父页面调用返回数组参数
         * @returns {[]}
         */
        function returnMenuIds() {
            let menuIds = [];
            // 获取选中的节点id
            menuIds = getTreeId(t.getChecked());
            return menuIds;
        }

        //监听提交
        form.on('submit(demo1)', function (data) {
            layer.msg("数据提交中。。。。");
            if (data.field.status == "on") {
                data.field.status = "1";
            } else {
                data.field.status = "0";
            }
            let checkData = tree.getChecked('id');
            let list = new Array(getChecked_list(checkData));
            alert(list);
            alert(JSON.stringify(data.field))
            let sysRole = data.field
            $.ajax({
                url: "/URMS/sysRole/editSubmitPermissions?list=" + list + "&id=" + data.field.id,
                type: "POST",
                async: false,
                dataType: "JSON",
                contentType: "application/json;",
                error: function (XMLHttpResponse) {
                    layer.msg("添加出错");
                },
                success: function (data) {
                    if (data == true) {
                        layer.msg("添加成功");
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                        return false
                    } else {
                        layer.msg("添加失败")
                    }
                }
            })


            //获取选中节点的ID
            function getChecked_list(data) {
                var id = "";
                $.each(data, function (index, item) {
                    if (id != "") {
                        id = id + "," + item.id;
                    } else {
                        id = item.id;
                    }
                    var i = getChecked_list(item.children);
                    if (i != "") {
                        id = id + "," + i;
                    }
                });
                return id;
            }
        })
    })


</script>
</body>
</html>

